<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配手机端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件实例三大属性 props</title>
</head>


<!-- react核心库 -->
<script src="../React-js/react.development.js"></script>
<!-- 操作DOM支持库 -->
<script src="../React-js/react-dom.development.js"></script>
<!-- babel转换库  jsx-js -->
<script src="../React-js/babel.min.js"></script>


<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <script type="text/babel">
        class LifeDemo extends React.Component {
            state = {
                opacity: 1,
                time: null
            }
            constructor() {
                super()
                // setInterval(() => {
                //     //获取原状态
                //     let {opacity} = this.state
                //     //减小0.1
                //     opacity -= 0.1
                //     if(opacity <= 0) opacity = 1
                //     //设置新的透明度
                //     console.log('opacity',opacity);
                //     this.setState({opacity})
                // }, 1000);
            }

            //生命周期挂载
            componentDidMount() {
                this.setState({time:setInterval(() => {
                    //获取原状态
                    let {opacity} = this.state
                    //减小0.1
                    opacity -= 0.1
                    if(opacity <= 0) opacity = 1
                    //设置新的透明度
                    console.log('opacity',opacity);
                    this.setState({opacity})
                }, 300)})
                // this.timer = setInterval(() => {
				// 	//获取原状态
				// 	let {opacity} = this.state
				// 	//减小0.1
				// 	opacity -= 0.1
				// 	if(opacity <= 0) opacity = 1
				// 	//设置新的透明度
				// 	this.setState({opacity})
				// }, 200);
            }
            
            // 组件销毁
            componentWillUnmount(){
                //清除定时器
                console.log('销毁');
                // clearInterval(this.timer)
				clearInterval(this.state.time)
            }

            deathCom =()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }

            render() {
                return (
                    <div>
                        <h1 >组件的生命周期</h1>
                        <h1 style={{ opacity: this.state.opacity }}>组件的生命周期</h1>
                        <button onClick={ this.deathCom }>销毁</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<LifeDemo />, document.getElementById('test'))
    </script>
    </script>
</body>

</html>